矛盾效应是一种视觉效果，用于创建任何物体、元素或文本的视觉幻觉，使其看起来以矛盾的方式移动。这种效果可以用来为您的网页添加有趣和独特的元素。
This can be easily created using HTML and CSS. In this article, we will discuss about the techniques and properties which is required for creating Paradoxical effect using CSS. We will start creating simple paradoxes using combination of two CSS properties simultaneously, and then dive into more advanced techniques which enables us to create complex paradoxical effects using CSS animations.
在本文结束时，您将拥有知识和技能，能够在自己的网页上创建令人惊叹和视觉上引人入胜的矛盾效果。
Creating Paradoxical Effect
使用CSS可以通过使用相互矛盾的CSS属性来实现矛盾效果，从而产生视觉上的矛盾或意外行为。以下是一些示例。
Example
的中文翻译为：
示例
在这里，我们使用CSS属性的组合，如float和clear，text-align和vertical-align，transform和transition等，创建了一些矛盾的效果。以下是要遵循的步骤−
-
创建一个 div、span 和 button 元素。
-
使用CSS对它们进行样式设置。
-
For the div element, use float and clear properties. For span element, use text-align and vertical-align properties. For button, use transform and transition.
<html>
<head>
<style>
div {
float: left;
clear: both;
background-color: yellow;
padding: 20px;
margin: 15px;
border: 1px solid black;
}
span {
text-align: center;
vertical-align: top;
background-color: lightblue;
padding: 20px;
margin: 10px;
display: inline-block;
border: 1px solid black;
}
button {
transform: rotate(180deg);
transition: transform 1s;
background-color: pink;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
button:hover {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div> This is a div element </div>
<span> This is a span element </span>
<br>
<br>
<button> Click me </button>
</body>
</html>
-
该div元素被向左浮动，然后在两侧清除，结果它不再浮动。可以通过使用float和clear属性来实现。对于任何元素，将float的值保持为left，将clear的值保持为both，这样可以使元素向左浮动，然后在两侧清除，结果元素不再浮动。
-
Using the text-align and vertical-align can also create paradoxical effect. The span element has text centered horizontally, but aligned to the top vertically, resulting in text that appears off-center.
-
使用 transform 和 transition 属性。初始时，button 元素被旋转了180度，但当鼠标悬停时，使用 transition 属性将其旋转回0度，以创建两个状态之间的平滑动画。
Example
的中文翻译为：
示例
移动背景，静止内容：可以通过在保持内容静止的同时，对一个元素的background-position属性进行动画处理来实现此效果。以下是需要遵循的步骤：
-
为背景图像创建一个容器div元素。在其中，创建另一个包含内容或文本的div元素。
-
指定背景图像的尺寸。同时，保持background-size为cover，overflow为hidden。
-
将内容与背景居中对齐。
-
现在，使用CSS动画来动画化背景的background-position。background-position从(0 0)到(100% 0)，使得背景沿着X轴移动。
<html>
<head>
<style>
.paradox {
background: url('https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300');
background-size: cover;
height: 500px;
width: 100%;
overflow: hidden;
}
.paradox .content {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
color: white;
font-size: 2em;
}
@keyframes background-slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
.paradox {
animation: background-slide 10s infinite linear;
}
</style>
</head>
<body>
<div class="paradox">
<div class="content">
<h1> Static Content </h1>
<p> This content remains stationary while the background moves. </p>
</div>
</div>
</body>
</html>
Example
的中文翻译为：
示例
固定内容，移动边框：我们可以通过动画化边框属性来创建这种效果，而内容保持静止。以下是需要遵循的步骤−
-
为背景图像创建一个容器div元素。在其中，创建另一个包含内容或文本的div元素。
-
指定背景图像的尺寸。同时，保持position为relative和overflow为hidden。
-
将内容与背景居中对齐。
-
Now, use CSS animation to animate the border of the background. On hovering, the size of the border increases from 0px to 20px and then returns to 0.
<html>
<head>
<style>
.paradox {
background: url('https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300');
height: 300px;
width: 430px;
margin: 10px;
position: relative;
overflow: hidden;
}
.paradox .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.paradox:hover {
animation: border 2s infinite linear;
}
@keyframes border {
0% {
border: 1px solid green;
}
50% {
border: 20px solid green;
}
100% {
border: 1px solid green;
}
}
</style>
</head>
<body>
<div class="paradox">
<div class="content">
<h1> Static Content </h1>
<p> This content remains stationary while the border moves. </p>
</div>
</div>
</body>
</html>
在上面的例子中，内容和背景保持静止，而边框移动。
结论
使用各种CSS属性，您可以在您的网页上创建独特的悖论效果，这将使您的网站用户友好，并增加其受欢迎程度。创建这样的视觉效果可以吸引用户的注意力，并帮助您创建动态网站。
以上就是如何使用CSS创建矛盾效果？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何使用CSS创建矛盾效果？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
