房屋租赁网站建设管理,上海做网站建设的公司,怎样购买起名软件自己做网站,信用惠州网站建设目录 一、简述二、太极效果制作 一、简述
本次主要介绍::after#xff0c;::before#xff0c;box-shadow这三个属性。 ::after#xff0c;::before这两个是伪类选择器#xff0c;box-shaow是用来设置元素的阴影效果 before:向选定的元素前插入内容 after:向选定的元素后插… 目录 一、简述二、太极效果制作 一、简述
本次主要介绍::after::beforebox-shadow这三个属性。 ::after::before这两个是伪类选择器box-shaow是用来设置元素的阴影效果 before:向选定的元素前插入内容 after:向选定的元素后插入内容 使用content 属性来指定要插入的内容值可以为空但是不能不写如果不写的话伪类选择器就不会显示出来。 例如以下代码
!DOCTYPE html
html
head
meta charsetutf-8
titletest/title
style
div:before
{
content:- 注意-;
}
/style
/headbody
div我的名字是 Donald/div/body
/html伪类选择器的内容是不可选中的
二、太极效果制作
1.第一步编写html部分 我们只需要定义一个div标签即可用它来完成太极的制作
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title太极/title
/head
bodydiv/div
/body
/html2.第二步设置div的样式
body{background-color: antiquewhite;
}
div{width: 150px;height: 300px;margin: 100px auto;background-color: white;border-radius: 50%;border-right: 150px solid black;box-shadow: 0px 0px 30px blueviolet;
}这里的box-shadow的第一个值是x轴移动的值第二个值是y轴移动的值第三个值代表模糊度第四个是阴影的颜色。 效果 第三步通过伪类选择器画出两个小圆
div::after,div::before{content: ;display: block;border-radius: 50%;margin-left: 75px;border: 50px solid black;background-color: white;width:50px;height: 50px;
}content必须要写出来值为空也可以如果不写的话伪类选择器就不会显示。 设置它的边框颜色为黑色然后就可以和大圆的黑色部分连接起来了。 效果 4.第四步将after的边框和背景分别改成白色和黑色。
/*覆盖上面::after的border和background-color两个属性*/
div::after{border: 50px solid white;background-color: black;
} 效果 5.当然你也可以给它个动画让它动起来当我们鼠标移动到太极上时它就开始转动
div:hover{animation: mytest 2s linear infinite;
}
keyframes mytest {to{ transform: rotate(360deg);}
}CSS完整代码
body{background-color: antiquewhite;
}
div{width: 150px;height: 300px;margin: 100px auto;background-color: white;border-radius: 50%;border-right: 150px solid black;box-shadow: 0px 0px 30px blueviolet;
}
div:hover{animation: mytest 2s linear infinite;
}
keyframes mytest {to{ transform: rotate(360deg);}
}div::after,div::before{content: ;display: block;border-radius : 50%;margin-left: 75px;border: 50px solid black;background-color: white;width:50px;height: 50px;
}
div::after{border: 50px solid white;background-color: black;
}
